<script setup>
import { defineEmits,ref ,defineProps,watch} from 'vue'
import axios, {getServerUrl} from "@/util/axios";
const emits=defineEmits(['update:modelValue'])

const tableData=ref([])
const handleClose = () => {
  emits('update:modelValue',false)
}

const props=defineProps({
  id:{
    type:Number,
    default:-1,
    required:true
  }
})

//监听id的变化，防止打开新的详情界面结果还是老的商品详情界面
watch(
    ()=>props.id,
    ()=>{
      console.log("id="+props.id);
      let id=props.id;
      if(id!=-1){
        initOrderDetailData(props.id);
      }
    },
    {deep:true,immediate:true}
)
const initOrderDetailData=async(id)=>{
  const res=await axios.get("admin/orderDetail/list/"+id);
  console.log(res.data.list)
  tableData.value=res.data.list;
}

</script>

<template>
  <el-dialog
    model-value="dialogVisible"
    title="订单商品详情"
    width="40%"
    @close="handleClose"
  >
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
    >
      <el-table-column type="index"   width="50" />

      <el-table-column prop="goodsPic" label="商品图片" width="200"  >
        <template v-slot="scope">
          <img :src="getServerUrl()+'/image/product/'+scope.row.goodsPic" width="80" height="80"/>
        </template>
      </el-table-column>

      <el-table-column prop="goodsName" label="商品名称" />

      <el-table-column prop="goodsPrice" label="商品价格" width="100" />

      <el-table-column prop="goodsNumber" label="商品数量" width="100" />

    </el-table>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>